<template>
  <div>
    <van-nav-bar title="城市选择" left-arrow @click-left="onClickLeft" fixed />
    <div class="foot-warp">
      <CurrentCity></CurrentCity>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <template #default>
          <!-- 热门城市 -->
          <p class="title">热门城市</p>
          <van-grid :column-num="3">
            <van-grid-item
              v-for="value in hotList"
              :key="value.id"
              :text="value.name"
              @click="selectCity(value)"
            />
          </van-grid>
          <!-- 城市列表 -->
          <div v-for="item in list" :key="item">
            <p class="title">{{ item }}</p>
            <van-cell
              v-for="cityItem in cityList[item]"
              :key="cityItem.id"
              :title="cityItem.name"
              @click="selectCity(cityItem)"
            />
          </div>
        </template>
      </van-list>
    </div>
  </div>
</template>

<script>
import CurrentCity from "./currentCity.vue";
import { getAllCityList } from "@/api/address";
export default {
  name: "mapList",
  data() {
    return {
      list: [],
      cityList: {},
      hotList: [],
      currentCity: {},
      loading: false,
      finished: false,
    };
  },
  components: {
    CurrentCity,
  },
  created() {
    this.getAllCityList();
    this.getHotCityList();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async getAllCityList() {
      const { data } = await getAllCityList("group");
      this.cityList = data;
      this.list = Object.keys(data).sort();
    },
    async getHotCityList() {
      const { data } = await getAllCityList("hot");
      this.hotList = data;
    },
    selectCity(city) {
      localStorage.setItem("currentCity", JSON.stringify(city));
      this.$router.back();
    },
    onLoad() {},
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: skyblue;
}
.foot-warp {
  padding-top: 50px;
}
.title {
  padding: 0 10px;
  color: #ccc;
  font-size: 14px;
}
</style>>
